{% extends "base.html" %}

{% block title %}User Center{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}
        <div class="card mb-3">
            <img class="card-img-top" id="img-header" src="https://picsum.photos/1114/240" alt="Card image cap" style="width: 1114px;height: 240px;">
            <div class="card-body">
                <div class="media">
                    <img class="align-self-start mr-3" id="img-avatar" src="https://picsum.photos/160/160" alt="Generic placeholder image" style="width: 160px;height: 160px">
                    <div class="media-body">
                        <h5 class="mt-0">{{ user_info.nickname }}</h5>
                        <p>一句诗：{{ poem }}</p>
                        <p id="card-text-1">{% lorem %}</p>
                        <p id="card-text-2" class="card-text">{% lorem %}</p>
                        <div class="row">
                            <div class="col">
                                <small class="text-muted">Last login: {{ user_info.last_login }}</small>
                            </div>

                            <div class="col">
                                <button class="btn btn-sm btn-light text-muted float-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                    See More Information
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 展开内容 -->
                <div class="collapse" id="collapseExample">
                    <br>
                    <div id="collapse-text">{% lorem %}</div>
                </div>
            </div>

            <!-- 异步加载顶部图片和头像 -->
            <script>
                $(document).ready(function () {
                    /*// header image
                    $.get("/api/utils/img_url/1114/240", function (data, status) {
                        $("#img-header").attr("src", data)
                    })
                    // avatar image
                    $.get("/api/utils/img_url/160/160", function (data, status) {
                        $("#img-avatar").attr("src", data)
                    })*/
                    // Hitokoto
                    $(document).ready(function () {
                        $.get('/api/utils/hitokoto', function (data, status) {
                            $('#card-text-1').text(data.data.hitokoto);
                        })
                        $.get('/api/utils/hitokoto', function (data, status) {
                            $('#card-text-2').text(data.data.hitokoto);
                        })
                        $.get('/api/utils/hitokoto', function (data, status) {
                            $('#collapse-text').text(data.data.hitokoto);
                        })
                        $.get('/api/utils/hitokoto', function (data, status) {
                            $('#collapse-text').text(data.data.hitokoto);
                        })
                    })
                })
            </script>
        </div>

        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <ul class="list-group list-group-flush">
                        {% for a in user_info.accounts.all %}
                            <a class="list-group-item list-group-item-action" href="/site/account-detail?id={{ a.id }}">
                                <li class="media">
                                    <img class="mr-3" id="img-account-{{ a.id }}" src="/api/utils/placeholder/64x64" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="mt-0 mb-1 text-dark">{{ a.name }}</h5>
                                        <span id="notes-{{ a.id }}" class="text-dark">{{ a.notes }}</span><br>
                                        <small class="text-muted" id="account-poem-{{ a.id }}"></small>
                                    </div>
                                </li>
                            </a>
                            <!-- 异步加载各个帐号的图片 -->
                            <script>
                                $(document).ready(function () {
                                    $.get("/api/utils/poem", function (data, status) {
                                        $("#account-poem-{{ a.id }}").text(data);
                                        console.log(data + " " + status);
                                    });
                                    $.get("/api/utils/img_url/64/64", function (data, status) {
                                        data += "?rndNum=" + Math.random();
                                        $("#img-account-{{ a.id }}").attr("src", data);
                                        console.log(data)
                                    });

                                    if (isLogin()) {
                                        try {
                                            $("#notes-{{ a.id }}").text(decrypt_data("{{ a.notes }}"));
                                        } catch (e) {
                                            console.error(e.toString());
                                            $("#notes-{{ a.id }}").text("This content is locked.");
                                        }
                                    } else
                                        $("#notes-{{ a.id }}").text("This content is locked.");
                                });
                            </script>
                        {% empty %}
                            <div class="list-group-item list-group-item-action">
                                <li class="media">
                                    <img id="img-empty-account" class="mr-3" src="/api/utils/placeholder/64x64" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="mt-0 mb-1 text-dark">
                                            <i class="material-icons-sm">error_outline</i>
                                            Empty
                                        </h5>
                                        <span class="text-dark">You have no any account. Add a new <a href="/site/account">Account</a> now!</span><br>
                                        <small class="text-muted">{% now "t" %}</small>
                                    </div>
                                </li>
                            </div>
                            <script>
                                $(document).ready(function () {
                                    $.get("/api/utils/img_url/64/64", function (data, status) {
                                        $("#img-empty-account").attr("src", data);
                                    })
                                })
                            </script>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                    <span class="card-title">
                        <i class="material-icons-sm">account_box</i>
                        Account Info
                    </span>
                    </div>
                    <div class="card-body">
                        <div class="card-text">
                            <i class="material-icons-sm text-muted">supervisor_account</i>
                            You have {{ user_info.accounts.all|length }} accounts <br>
                            <span class="text-muted small text-center" style="width: 100%; display: inline-block; margin: 0;">
                            {{ user_info.account_platforms.all|length }} platforms
                            {{ user_info.accounts.all|length }} accounts
                        </span>
                        </div>
                        <div class="card-text">
                            <i class="material-icons-sm text-muted">thumb_up</i>
                            You have 284 thumbs
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6 justify-content-center border-right">
                                <div class="card-text text-muted text-center">Accounts</div>
                                <div class="text-center text-dark" style="font-size: 28px;">{{ user_info.accounts.all|length }}</div>
                            </div>

                            <div class="col-6 justify-content-center">
                                <div class="card-text text-muted text-center">Platforms</div>
                                <div class="text-center text-dark" style="font-size: 28px;">{{ user_info.account_platforms.all|length }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="list-group">
                    {% for p in user_info.account_platforms.all %}
                        <a class="list-group-item list-group-item-action" href="/site/account-list?platform={{ p.name }}">
                            <i class="material-icons-sm">account_circle</i>
                            <span class="text-muted">{{ p }}</span>
                        </a>
                    {% empty %}
                        <a class="list-group-item list-group-item-action" href="/site/account-list">
                            <i class="material-icons-sm">error_outline</i>
                            <span class="text-muted">No Platforms</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% else %}
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}

    <!-- 加载数据安全组件 -->
    {% include "component/data-secure.html" %}
{% endblock %}
